<template>
  <van-tabbar v-model="active" active-color="#FF5E00" inactive-color="#6D3805">
    <van-tabbar-item v-for="(nav,index) in tabBarList" :key="index" :name="nav.name" replace :to="{path:nav.path}">
      <span>{{nav.name}}</span>
      <template #icon="props">
        <img :src="props.active ? nav.iconHover : nav.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import IconShop from '../assets/img/icon-nav-shop.png'
import IconShopActive from '../assets/img/icon-nav-shop-active.png'
import IconExplore from '../assets/img/icon-nav-explore.png'
import IconExploreActive from '../assets/img/icon-nav-explore-active.png'
import IconCart from '../assets/img/icon-nav-cart.png'
import IconCartActive from '../assets/img/icon-nav-cart-active.png'
import IconFavorite from '../assets/img/icon-nav-favorite.png'
import IconFavoriteActive from '../assets/img/icon-nav-favorite-active.png'
import IconAccount from '../assets/img/icon-nav-account.png'
import IconAccountActive from '../assets/img/icon-nav-account-active.png'
const active = ref('Shop');
const tabBarList = [
  {
    name: "Shop",
    iconHover: IconShopActive,
    icon: IconShop,
    path: '/shop',
    active: false,
  },
  {
    name: "Explore",
    iconHover: IconExploreActive,
    icon: IconExplore,
    path: '/explore',
    active: false,
  },
  {
    name: "Cart",
    iconHover: IconCartActive,
    icon: IconCart,
    path: '/cart',
    active: false,
  },
  {
    name: "Favorite",
    iconHover: IconFavoriteActive,
    icon: IconFavorite,
    path: '/favorite',
    active: false,
  },
  {
    name: "Account",
    iconHover: IconAccountActive,
    icon: IconAccount,
    path: '/account',
    active: false,
  },
]
const icon = {
  iconShop: IconShop,
  iconShopActive: IconShopActive,
  iconExplore: IconExplore,
  iconExploreActive: IconExploreActive,
  iconCart: IconCart,
  iconCartActive: IconCartActive,
  iconFavorite: IconFavorite,
  iconFavoriteActive: IconFavoriteActive,
  iconAccount: IconAccount,
  iconAccountActive: IconAccountActive,
};

const route = useRoute()
const router = useRouter()
const activeName = route.meta.activeName

const getActive = (() => {
  tabBarList.forEach((item,index) => {
    if (item.name == activeName) {
      active.value = item.name
    }
  })
})
onMounted(() => {
  getActive()
})
</script>

<style scoped>
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border-top: 1px solid #e9e9e9;
  border-radius: 40px 40px 0 0;
  box-shadow: 0px 0px 10px 3px #e9e9e9;
}
</style>